<template>
	<view class="container">
		<scroll-view class="list" scroll-y="true">
			<Default
				:showflag="showflag"
				:type="4"
			></Default>
			<view class="order" v-if="orderList.length > 0" v-for="(item, index) in orderList" :key='index'>
				<view class="state" v-if="item.refund_info.refund_verify == 0">处理中</view>
				<view class="state" v-if="item.refund_info.refund_verify == 1">同意</view>
				<view class="state" v-if="item.refund_info.refund_verify == 2">拒绝</view>
				<!-- 店铺 -->
				<view class="store" @click="goStore(item.store.id)">
					<image :src="item.store.store_name" mode=""></image>
					<view>{{ item.store.store_name }}</view>
					<image src="https://community.chuangxiangdianli.com/images/order/order_arrow.png" mode=""></image>
				</view>
				<!-- 商品 -->
				<view class="goods" v-for="(v, n) in item.order_goods">
					<image @click="goGoodDetail(v.id)" class="goodsPic" :src="v.goods_image" mode=""></image>
					<view class="goodsMsg">
						<view class="goodsName">{{ v.goods_name }}</view>
						<view class="goodsSpec"><text v-if="v.sku_id">{{ v.sku_name }}</text></view>
						<view class="goodsPrice">
							<view class="price">￥<text>{{ v.total_price }}</text></view>
							<view class="num">x <text>{{ v.buy_num }}</text></view>
						</view>
					</view>
				</view>
				<!-- 价格 -->
				<view class="money">
					<text style="color: #A6A6A6;">共{{ item.goodsNum }}件  合计:</text> ￥ <text>{{ item.total_price }}</text>
				</view>
				<!-- 按钮 -->
				<view class="btnList">
					<view v-if="item.refund_info.refund_verify == 0">取消申请</view>
					<view v-if="item.refund_info.refund_verify == 1 || item.refund_info.refund_verify == 2">删除订单</view>
					<view @click="goOrderDetail(item.id)">查看详情</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				showflag: false,
				orderList: [],
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			//  获取列表数据
			getList() {
				var that = this
				this.$mrequest({
					url: 'Mini/order/orderList',
					method: 'POST',
					data: {
						order_status: 5,
						is_refund: true
					},
					callBack: function callBack (res) {
						if (res.status) {
							that.orderList = res.data
							if(that.orderList.length > 0){
								that.orderList.forEach(item => {
									let num = 0
									item.order_goods.forEach(v => {
										num += v.buy_num
									})
									item.goodsNum = num
								})
								that.showflag = false
							} else {
								that.showflag = true
							}
							console.log(that.orderList)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					},
				})
			},
			//  查看订单详情
			goOrderDetail(id) {
				uni.navigateTo({
					url: '../orderDetail/index?order_id=' + id + '&str="return"'
				})
			},
			// 查看商品详情
			goGoodDetail(id){
				uni.navigateTo({
					url: '/other/goodsDetail/index?goods_id=' + id
				})
			},
			//  跳转店铺
			goStore(id) {
				uni.navigateTo({
					url: '/other/store/index?id=' + id 
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: rgba(247, 248, 249, 1);
		padding: 10rpx 30rpx 0;
	}
	.list{
		height: 100%;
	}
	.order{
		position: relative;
		overflow: hidden;
		width: 100%;
		border-radius: 20rpx;
		padding: 0 24rpx;
		background-color: #fff;
		margin: 17rpx 0;
		.state{
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F55519;
		}
		.store{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			height: 102rpx;
			&>image:nth-child(1){
				display: block;
				height: 26rpx;
				width: 26rpx;
			}
			&>view{
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #393939;
				margin: 0 15rpx;
			}
			&>image:nth-child(3){
				display: block;
				width: 21rpx;
				height: 21rpx;
			}
		}
		.goods{
			display: flex;
			flex-direction:row;
			justify-content: flex-start;
			.goodsPic{
				display: block;
				width: 180rpx;
				height: 180rpx;
				border-radius: 15rpx;
			}
			.goodsMsg{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 0 20rpx;
				.goodsName{
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #676767;
				}
				.goodsSpec{
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #A6A6A6;
				}
				.goodsPrice{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-bottom: 10rpx;
					.price{
						font-size: 16rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #F55519;
						&>text{
							font-size: 24rpx;
						}
					}
					.num{
						font-size: 18rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #393939;
					}
				}
			}
		}
		.money{
			text-align: right;
			font-size: 16rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: rgba(245, 85, 25, 1);
			margin: 38rpx 0;
			&>text{
				font-size: 24rpx;
				color: rgba(245, 85, 25, 1);
			}
		}
		.btnList{
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			height: 50rpx;
			margin-bottom: 36rpx;
			&>view{
				height: 100%;
				width: 148rpx;
				border-radius: 25rpx;
				border: 2rpx solid #BBBBBB;
				text-align: center;
				line-height: 50rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				margin-left: 25rpx;
			}
		}
	}
</style>
